<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{massage}}
</div>
<div id="div1">
    {{a}}
</div>
<div class="test">
    {{msg}}
</div>
<div id="div2">
    {{data}}
</div>
<div id="zyd">
    {{data}}
</div>

</body>
<script src='../lib/vue.js'></script>
<script>
    // 创建一个vue应用实例
    var app = new Vue(
        {
            el: '#app',
            data: {
                massage: 'hello Zyd'
            }
        }
    )

    // 也可以这样写:创建一个data对象,之后传入到vue实例中
    var data = {a: 2}
    var vm = new Vue(
        {
            el: '#div1',
            data: data
        }
    )
    // 获取vue对象的属性
    console.log(vm.a) // 2
    console.log(vm.$el)  // #div1对象

    // 修改vue实例的属性
    vm.a = 'zyd cool'

    // 视图中的数据改变时,视图会重新渲染,
    // 但是,只有当实例被创建并且存在data属性时,才是响应式的
    // 看例子
    vm_test = new Vue(
        {
            el: '.test',
            // data:{
            //    msg: '我是测试代码',
            // }
        }
    )
    // 创建vue实例时没有创建data属性,在下面创建会报错
    // vm_test.data = {
    //     msg:'我是测试代码',
    // }


    var obj = {
        data: 'zyd123'
    }

    // 阻止响应式系统追踪变化的方法 Object.freeze()
    Object.freeze(obj)
    // 使用这个方法后,data对象不会再更新
    vu = new Vue({
        el: '#div2',
        data: obj
    })
    obj.data = 'cmy123' // 不会更新
    console.log(obj.data)  // zyd123


    // 针对vue特有的属性,可以通过$取值
    console.log(vu.$el)  //#div2
    console.log(vu.$data) // zyd123


    //声明周期函数,和django中的中间件有点类似,在实例的不同生命周期有不同的生命周期函数
    var obj2 = {
        data: 'zydnb!!1'
    }


    vu_obj = new Vue({
        el: '#zyd',
        data: obj2,
        created: function () {
            console.log(this.data)
            alert(this.data)
        }
        // 注意:生命周期函数不能使用钩子函数,this的指向为这个vue实例
        // 更多的生命周期函数可以参考Vue官网的api
    })
</script>
</html>